<template>
  <vue-tinymce v-model="rests"
               ref="tinymceLight"
               :setting="setting"
               :setup="setup" />
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  props: {
    height: {
      type: [Number, String],
      default: 350
    },
    wordLimit: {
      type: Number,
      default: 200
    },
    placeholder: {
      type: String,
      default: '请输入信息'
    }
  },
  data () {
    return {
      verification: true,
      rests: '',
      setting: {
        toolbar: false, // 隐藏工具栏
        menubar: false, // 隐藏菜单栏
        plugins: 'paste ax_wordlimit',
        language: 'zh_CN', // 本地化设置
        height: this.height,
        ax_wordlimit_num: this.wordLimit,
        ax_wordlimit_callback: this.axWordlimitCallback,
        ax_wordlimit_event: 'SetContent Undo Redo Keyup blur',
        placeholder: this.placeholder,
        paste_enable_default_filters: true,
        paste_preprocess: this.pastePreprocess
      }
    }
  },
  methods: {
    init (data) {
      this.rests = data
    },
    axWordlimitCallback (editor, txt, num) {
      this.verification = false
      this.$message.warning(`当前字数：${txt.length}，限制字数：${num}`)
    },
    pastePreprocess (plugin, args) {
      // 将复制的图片、视频全部过滤掉\
      // eslint-disable-next-line no-useless-escape
      args.content = args.content.replace(/<img\b.*?(?:\>|\/>)/gi, '')
      // eslint-disable-next-line no-useless-escape
      args.content = args.content.replace(/<video\b.*?(?:\>|\/>)/gi, '')
      // eslint-disable-next-line no-useless-escape
      args.content = args.content.replace(/<article\b.*?(?:\>|\/>)/gi, '')
    },
    getContent () {
      return this.rests
    },
    setup (editor) {
      const self = this
      editor.on('keyup', function () {
        self.verification = true
      })
    },
    getVerification () {
      return this.verification
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
